script.aculo.us এবং Controls.Slider
script.aculo.us হল একটি JavaScript লাইব্রেরি যা AJAX, ড্র্যাগ এবং ড্রপ, এফেক্টস, এনিমেশন এবং অন্যান্য ইউজার ইন্টারফেস উপাদান তৈরি করতে ব্যবহৃত হয়। এই লাইব্রেরিটি Prototype.js এর উপরে নির্মিত এবং ওয়েব অ্যাপ্লিকেশনগুলির ইউজার ইন্টারফেসে উন্নতি করার জন্য ডিজাইন করা হয়েছে।
এখন, Controls.Slider হল script.aculo.us লাইব্রেরির একটি কম্পোনেন্ট যা একটি স্লাইডার তৈরি করতে ব্যবহৃত হয়। স্লাইডার সাধারণত ইউজারকে একটি মান নির্বাচন করার জন্য ব্যবহার করা হয়, যেমন ভলিউম কন্ট্রোল, প্রগ্রেস বার ইত্যাদি।
Controls.Slider এর বৈশিষ্ট্য
Controls.Slider ব্যবহার করে আপনি একটি স্লাইডার উপাদান তৈরি করতে পারেন যা ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন করার মাধ্যমে মান পরিবর্তন করে। এটি অত্যন্ত কাস্টমাইজযোগ্য এবং এর মাধ্যমে আপনি সহজেই বিভিন্ন ধরনের স্লাইডার তৈরি করতে পারেন, যেমন হরিজেন্টাল বা ভার্টিকাল স্লাইডার, নির্দিষ্ট পরিসরে মান নির্বাচন করা, এবং স্লাইডার হ্যান্ডেল বা ট্র্যাক কাস্টমাইজ করা।
Controls.Slider ব্যবহার করার উদাহরণ
নিচে একটি উদাহরণ দেওয়া হলো যেখানে Controls.Slider ব্যবহার করে একটি স্লাইডার তৈরি করা হয়েছে যা একটি পরিসরে মান নির্বাচন করতে সক্ষম।
১. প্রাথমিক HTML সেন্টআপ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider Example</title>
<script src="prototype.js"></script> <!-- script.aculo.us এর জন্য Prototype.js অবশ্যই ইনক্লুড করতে হবে -->
<script src="scriptaculous.js?load=effects,dragdrop,controls"></script> <!-- script.aculo.us এর জন্য স্ক্রিপ্ট -->
<style>
#sliderContainer {
width: 300px;
margin: 20px;
}
</style>
</head>
<body>
<div id="sliderContainer">
<p>Volume Control:</p>
<div id="slider" style="width: 100%;"></div>
<p>Value: <span id="sliderValue">50</span></p> <!-- স্লাইডার মান দেখানোর জন্য -->
</div>
<script>
// Controls.Slider ইনস্ট্যান্স তৈরি করা
var slider = new Control.Slider('slider', {
range: $R(0, 100), // স্লাইডারের রেঞ্জ ০ থেকে ১০০
values: [50], // প্রাথমিক মান ৫০ সেট করা
onSlide: function(value) {
// যখন স্লাইডার পরিবর্তিত হবে, তখন এই ফাংশনটি কল হবে
$('sliderValue').innerHTML = value;
}
});
</script>
</body>
</html>
ব্যাখ্যা:
- HTML টেমপ্লেট: এখানে একটি ডিভ আইডি
sliderদিয়ে স্লাইডার ট্র্যাক তৈরি করা হয়েছে। - Prototype.js এবং script.aculo.us স্ক্রিপ্ট:
Prototype.jsএবংscript.aculo.usলাইব্রেরি যোগ করতে হবে, কারণ Controls.Slider এর জন্য এই লাইব্রেরিগুলি প্রয়োজন। - Control.Slider() ফাংশন: স্লাইডার তৈরি করতে
Control.Slider()ফাংশন ব্যবহার করা হয়েছে। এখানেrange: $R(0, 100)দিয়ে স্লাইডারের পরিসীমা নির্ধারণ করা হয়েছে, এবংvalues: [50]দিয়ে প্রথম মান নির্ধারণ করা হয়েছে।onSlideকলব্যাক ফাংশনটি ব্যবহারকারী যখন স্লাইডারটি সরাবে, তখন এটি স্লাইডারের মানকে রিয়েল-টাইমে দেখাতে সাহায্য করবে।
Controls.Slider এর কাস্টমাইজেশন
Controls.Slider ব্যবহার করার সময় আপনি এটি কাস্টমাইজ করতে পারেন যেমন স্লাইডার ট্র্যাকের রঙ, স্লাইডার হ্যান্ডেল, স্লাইডার শৈলী ইত্যাদি পরিবর্তন করতে পারেন।
উদাহরণ: স্লাইডার হ্যান্ডেল কাস্টমাইজ করা
var slider = new Control.Slider('slider', {
range: $R(0, 100),
values: [50],
sliderValue: 50,
onSlide: function(value) {
$('sliderValue').innerHTML = value;
},
handle: 'sliderHandle' // স্লাইডার হ্যান্ডেল কাস্টমাইজ করা
});
এখানে, handle: 'sliderHandle' দিয়ে স্লাইডার হ্যান্ডেলের জন্য CSS ক্লাস নির্ধারণ করা হয়েছে।
উদাহরণ: স্লাইডারের ট্র্যাক কাস্টমাইজ করা
#slider .track {
background-color: #ccc;
}
এখানে, স্লাইডারের ট্র্যাকের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।
সারাংশ
Controls.Slider ব্যবহার করে আপনি সহজেই ইউজার ইন্টারফেসে স্লাইডার উপাদান তৈরি করতে পারেন, যা ইউজারদের একটি পরিসরে মান নির্বাচন করতে দেয়। script.aculo.us লাইব্রেরির সাহায্যে স্লাইডারটির সাথে ইনটারঅ্যাকশন করা খুব সহজ। এই স্লাইডারের মাধ্যমে আপনি ভলিউম কন্ট্রোল, প্রগ্রেস বার, এবং অন্যান্য এফেক্ট তৈরি করতে পারেন।
Read more
